<template>
  <div class="about">
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>云办公</el-breadcrumb-item>
      <el-breadcrumb-item>员工请假</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <!-- 搜索 -->
      <el-form :inline="true" ref="leave" :model="leave">
        <el-form-item prop="processName">
          <el-select
            v-model="leave.processName"
            placeholder="请选择流程名称"
            clearable
          >
            <el-option
              v-for="item in select"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="processState">
          <el-select
            v-model="leave.processState"
            placeholder="请选择流程状态"
            clearable
          >
            <el-option
              v-for="item in select1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="success"
            size="medium"
            round
            @click="resetForm('leave')"
            >重置</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="medium" @click="getList" round
            >查询</el-button
          >
        </el-form-item>
      </el-form>
      <!-- 创建请假 -->
      <el-row>
        <el-col :span="4"
          ><el-button type="primary" @click="leaveDialogVisible = true"
            >创建请假</el-button
          ></el-col
        >
      </el-row>
      <!-- 请假列表区 -->
      <el-table border stripe :data="leaveList">
        <el-table-column label="序号" type="index"> </el-table-column>
        <el-table-column label="用户名" prop="username"> </el-table-column>
        <el-table-column label="部门" prop="departmentName"> </el-table-column>
        <el-table-column label="工号" prop="jobNumber"> </el-table-column>
        <el-table-column label="流程名称" prop="processName"> </el-table-column>
        <el-table-column label="流程标识" prop="processKey"> </el-table-column>
        <el-table-column label="审批状态">
          <template slot-scope="scope">
            <span v-if="scope.row.processState == 0">待审批</span>
            <span v-if="scope.row.processState == 1">审批中</span>
            <span v-if="scope.row.processState == 2">审批通过</span>
            <span v-if="scope.row.processState == 3">审批不通过</span>
            <span v-if="scope.row.processState == 4">撤销</span>
            <span v-if="scope.row.processState == 5">等待销假</span>
          </template>
        </el-table-column>
        <el-table-column label="流程id" prop="processId"> </el-table-column>
        <el-table-column label="流程实例id" prop="processInstanceId">
        </el-table-column>
        <el-table-column label="节点负责人角色" prop="procCurrNodeUserGroup">
        </el-table-column>
        <el-table-column label="进程应用时间" prop="procApplyTime">
        </el-table-column>
        <el-table-column label="操作" width="130px">
          <template slot-scope="scope">
            <!-- <el-button
              type="primary"
              size="mini"
              @click="infoId(scope.row.processId)"
              >请假操作</el-button
            > -->
            <el-button
              type="danger"
              size="mini"
              @click="schedule(scope.row.processId)"
              >请假进度查询</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="leave.currentPage"
              :page-sizes="[2, 4, 8, 10]"
              :page-size="leave.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
      <!-- 创建审批小弹窗 -->
      <el-dialog
        title="创建请假"
        :visible.sync="leaveDialogVisible"
        width="40%"
        @close="leaveDialogClosed"
      >
        <el-form
          :model="leaveForm"
          :rules="leaveFormRules"
          ref="leaveFormRef"
          label-width="90px"
        >
          <el-form-item label="部门名称" prop="departmentName">
            <el-input v-model="leaveForm.departmentName"></el-input>
          </el-form-item>
          <el-form-item label="申请人" prop="username">
            <el-input v-model="leaveForm.username"></el-input>
          </el-form-item>
          <el-form-item label="工号" prop="jobNumber">
            <el-input v-model="leaveForm.jobNumber"></el-input>
          </el-form-item>
          <el-form-item label="申请时间" prop="procApplyTime">
            <el-date-picker v-model="leaveForm.procApplyTime"></el-date-picker>
          </el-form-item>
          <!-- <el-form-item label="流程业务ID" prop="processId">
            <el-input v-model="leaveForm.processId"></el-input>
          </el-form-item>
          <el-form-item label="流程实例ID" prop="processInstanceId">
            <el-input v-model="leaveForm.processInstanceId"></el-input>
          </el-form-item> -->
          <!-- <el-form-item label="流程标识" prop="processKey">
            <el-input v-model="leaveForm.processKey"></el-input>
          </el-form-item> -->
          <el-form-item label="流程名称" prop="processName">
            <el-input v-model="leaveForm.processName"></el-input>
          </el-form-item>
          <!-- <el-form-item label="流程状态" prop="processState">
            <el-input v-model="leaveForm.processState"></el-input>
          </el-form-item> -->

          <el-form-item label="请假天数" prop="duration">
            <el-input v-model="leaveForm.procLeave.duration"></el-input>
          </el-form-item>
          <el-form-item label="开始时间" prop="startTime">
            <el-date-picker
              v-model="leaveForm.procLeave.startTime"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间" prop="endTime">
            <el-date-picker
              v-model="leaveForm.procLeave.endTime"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="请假原因" prop="leaveReason">
            <el-input v-model="leaveForm.procLeave.leaveReason"></el-input>
          </el-form-item>
          <el-form-item label="请假类型" prop="type">
            <el-input v-model="leaveForm.procLeave.type"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="leaveDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="leaveInfo">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 请假操作弹窗 -->
      <el-dialog
        title="请假信息"
        :visible.sync="infoDialogVisible"
        width="40%"
        @close="infoDialogClosed"
      >
        <el-form
          :model="infoForm"
          :rules="infoFormRules"
          ref="infoFormRef"
          label-width="100px"
        >
          <el-form-item label="工号" prop="jobNumber">
            <el-input v-model="infoForm.jobNumber"></el-input>
          </el-form-item>
          <el-form-item label="业务id" prop="processId">
            <el-input v-model="infoForm.processId"></el-input>
          </el-form-item>
          <el-form-item label="审批意见" prop="handleOpinion">
            <el-input v-model="infoForm.handleOpinion"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="infoDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="agree">通过</el-button>
          <el-button type="danger" @click="turnDown">驳回</el-button>
          <el-button type="success" @click="revoke">撤销</el-button>
        </span>
      </el-dialog>
      <!-- 进度查询表 -->
      <el-dialog
        title="审批信息"
        :visible.sync="scheduleDialogVisible"
        width="40%"
        @close="scheduleDialogClosed"
      >
        <el-form ref="scheduleFormRef">
          <el-table border stripe :data="scheduleInfo">
            <el-table-column label="序号" type="index"> </el-table-column>
            <el-table-column label="工号" prop="handleJobNumber">
            </el-table-column>
            <el-table-column label="发起申请" prop="handleOpinion">
            </el-table-column>
            <el-table-column label="申请时间" prop="handleTime">
            </el-table-column>
            <el-table-column label="申请类型" prop="handleType">
            </el-table-column>
            <el-table-column label="申请用户" prop="handleUserName">
            </el-table-column>
            <el-table-column label="业务id" prop="processId"> </el-table-column>
            <el-table-column label="任务id" prop="taskId"> </el-table-column>
            <el-table-column label="任务关键词" prop="taskKey">
            </el-table-column>
            <el-table-column label="任务名" prop="taskName"> </el-table-column>
          </el-table>
        </el-form>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //用于存放请求信息
      leaveList: [],
      leave: {
        jobNumber: "",
        processKey: "leave",
        processState: "",
        processName: "",
        departmentName: "",
        procCurrNodeUserGroup: "",
         currentPage: 1,
        pageSize: 10,
      },
      total:0,

      //创建请假对话框隐藏
      leaveDialogVisible: false,
      //创建请假信息对象
      leaveForm: {
        departmentName: "",
        jobNumber: "",
        username: "",
        procApplyTime: "",
        procCurrNodeUserGroup: "",
        processId: "",
        processInstanceId: "",
        processKey: "leave",
        processName: "请假",
        processState: "0",
        procLeave: {
          duration: "",
          endTime: "",
          startTime: "",
          leaveReason: "",
          type: "",
        },
      },
      //创建请假信息验证规则
      leaveFormRules: {},
      //审批弹窗关闭，提交表单及验证规则
      infoDialogVisible: false,
      infoForm: {
        handleOpinion: "",
      },
      infoFormRules: {
        handleOpinion: [
          { required: true, message: "请输入审批通过意见", trigger: "blur" },
          {
            min: 1,
            max: 200,
            message: "审批通过意见为1~200个字符之间",
            trigger: "blur",
          },
        ],
        jobNumber: [
          { required: true, message: "请输入工号", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "工号为2~20个字符之间",
            trigger: "blur",
          },
        ],
        processId: [
          { required: true, message: "请输入业务id", trigger: "blur" },
          {
            min: 2,
            max: 50,
            message: "业务id为2~50个字符之间",
            trigger: "blur",
          },
        ],
      },
      //进度查询对话框隐藏
      scheduleDialogVisible: false,
      scheduleInfo: [],
      //搜索下拉框数值
      select: [
        {
          value: "请假",
          label: "请假",
        },
        // {
        //   value: "报销",
        //   label: "报销",
        // },
        // {
        //   value: "出差",
        //   label: "出差",
        // },
        // {
        //   value: "补卡",
        //   label: "补卡",
        // },
        // {
        //   value: "调岗",
        //   label: "调岗",
        // },
        // {
        //   value: "调薪",
        //   label: "调薪",
        // },
        // {
        //   value: "加班",
        //   label: "加班",
        // },
        // {
        //   value: "离职",
        //   label: "离职",
        // },
        // {
        //   value: "转正",
        //   label: "转正",
        // },
      ],
      select1: [
        {
          value: "0",
          label: "等待处理",
        },
        {
          value: "1",
          label: "审批中",
        },
        {
          value: "2",
          label: "审批通过",
        },
        {
          value: "3",
          label: "审批不通过",
        },
        {
          value: "4",
          label: "撤销",
        },
        {
          value: "5",
          label: "等待销假",
        },
      ],
    };
  },
  created() {
    this.leave.currentPage = 1;
    this.leave.pageSize = 10;
    this.getList();
  },

  methods: {
     //重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //获取请假信息接口
    getList() {
      //接收role角色权限信息
      let role = JSON.parse(sessionStorage.getItem("rolee"));
      console.log(role.role);
      const arr = role.role.split("_");
      console.log(arr[1]);
      this.leave.procCurrNodeUserGroup = arr[1];

      this.$http.post("audit/instanceQuery", this.leave).then((res) => {
        console.log(res);
        this.leaveList = res.data.rows;
        this.total = res.data.total;
        if (res.data.flag !== true) {
          return this.$message.error("获取请假信息失败!");
        }
      });
    },
     //监听信息条数
    handleSizeChange(newSize) {
      // console.log(newSize);
      this.leave.pageSize = newSize;
      this.getList();
    },
    //监听页数
    handleCurrentChange(newPage) {
      // console.log(newPage);
      this.leave.currentPage = newPage;
      this.getList();
    },
    //监听创建请假表单的关闭事件
    leaveDialogClosed() {
      this.$refs.leaveFormRef.resetFields();
    },
    //创建请假信息接口
    leaveInfo() {
      let role = JSON.parse(sessionStorage.getItem("rolee"));
      console.log(role.role);
      const arr = role.role.split("_");
      console.log(arr[1]);
      this.leaveForm.procCurrNodeUserGroup = arr[1];

      this.$http.post("audit/startProcess", this.leaveForm).then((res) => {
        console.log(res);
        this.leaveDialogVisible = false;
        if (res.data.flag !== true) {
          return this.$message.error("创建请假信息失败!");
        }
        this.$message.success("创建请假信息成功!");
        this.getList();
      });
    },
    //请假通过表单的关闭事件
    infoDialogClosed() {
      this.$refs.infoFormRef.resetFields();
    },
    //请假详细信息接口
    infoId(processId) {
      console.log(processId);
      this.$http({
        url: "audit/selectInstanceById",
        params: {
          processId: processId,
        },
        method: "get",
      }).then((res) => {
        console.log(res);
        this.infoForm = res.data.data;
        console.log(this.infoForm);
        this.infoDialogVisible = true;
      });
    },
    //请假通过接口
    async agree() {
      this.$http({
        url: "audit/completeTask?order=2",
        params: {
          jobNumber: this.infoForm.jobNumber,
          processId: this.infoForm.processId,
          handleOpinion: this.infoForm.handleOpinion,
        },
        method: "post",
      }).then((res) => {
        console.log(res);
        // if (res.data.flag !== true) {
        //   return this.$message.error("请假通过信息失败!");
        // }
        // this.$message.success("请假通过信息成功!");
        this.infoDialogVisible = false;
        this.getList();
      });
    },
    //请假驳回接口
    turnDown() {
      this.$http({
        url: "audit/completeTask?order=3",
        params: {
          jobNumber: this.infoForm.jobNumber,
          processId: this.infoForm.processId,
          handleOpinion: this.infoForm.handleOpinion,
        },
        method: "post",
      }).then((res) => {
        console.log(res);
        if (res.data.flag !== true) {
          return this.$message.error("驳回请假信息失败!");
        }
        this.$message.success("驳回请假信息成功!");
        this.infoDialogVisible = false;
      });
      this.getList();
    },
    //请假撤销接口
    revoke() {
      this.$http({
        url: "audit/completeTask?order=4",
        params: {
          jobNumber: this.infoForm.jobNumber,
          processId: this.infoForm.processId,
          handleOpinion: this.infoForm.handleOpinion,
        },
        method: "post",
      }).then((res) => {
        console.log(res);
        // if (res.data.flag !== true) {
        //   return this.$message.error("撤销请假信息失败!");
        // }
        // this.$message.success("撤销请假信息成功!");
        this.infoDialogVisible = false;
      });
      this.getList();
    },
    //监听审批进度表单的关闭事件
    scheduleDialogClosed() {
      this.$refs.scheduleFormRef.resetFields();
    },
    //查询请假进度
    schedule(processId) {
      console.log(processId);
      this.$http
        .get(
          "/audit/approvals",
          { params: { processId } },
          {
            headers: {
              "Content-Type": "multipart/form-data",
            },
          }
        )
        .then((res) => {
          console.log(res);
          if (res.data.flag !== true) {
            return this.$message.error("查询请假进度失败!");
          }
          this.$message.success("查询请假进度成功!");
          this.scheduleInfo = res.data.data;
          console.log(this.scheduleInfo);
          this.scheduleDialogVisible = true;
        });
    },
  },
};
</script>

<style scoped></style>
